import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Badge, Tabs  } from "antd-mobile";
import { BellOutline } from "antd-mobile-icons";
import './Home.css'
import TabBars from "../../components/TabBars";

function Home() {
    const navigate = useNavigate()
  const { place } = useParams();
  const [content,setcontent] = useState(false)
useEffect(()=>{
    setTimeout(() => {
    setcontent(true)
  }, 3000);
},[])

const tomsg = () => {
    navigate('/message')
}
const tolist = () => {
  navigate('/list')
}
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div>
          <p>您的位置</p>
          <h2>{place === ':place' ? '北京市' : place}</h2>
        </div>
        <div onClick={tomsg}>
          <Badge content={content ? Badge.dot : null}>
            <BellOutline fontSize={20} />
          </Badge>
        </div>
      </div>
      <div>
         <Tabs>
          <Tabs.Tab title='全部' key='fruits'>
            <div style={{display:'flex',justifyContent:'space-between'}}>
              <div>即将开展</div>
              <div onClick={tolist}>查看所有</div>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='音乐会' key='vegetables'>
            音乐会
          </Tabs.Tab>
          <Tabs.Tab title='研讨会' key='animals'>
            研讨会
          </Tabs.Tab>
          <Tabs.Tab title='剧院' key='kuyuan'>
            剧院
          </Tabs.Tab>
        </Tabs>
      </div>
      <TabBars pathname={'home/:place'}></TabBars>
    </div>
  );
}

export default Home;
